<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>公开视频课</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/public.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/midi-video.css"/>
		<script src="__PUBLIC__/midi/js/jquery-2.2.3 (1).js" type="text/javascript"></script>
		<script src="__PUBLIC__/midi/js/public.js" type="text/javascript"></script>
		<style>
			.footer {
				widows: 100%;
				background-color: #F5F5F8;
			}
			.footer .con{
				width: 1200px;
				margin: 0 auto;
			}
			.footer .con .inner{
				padding-top: 54px;
			}
			
			.foot-item-img{
				height: 200px;
				padding: 0 !important;
				position: relative;
			}
			.foot-item-img .bg-img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.foot-item-img .play{
				position: absolute;
				right: 37px;
				bottom: 26px;
				width: auto;
				height: auto;
				width: 10%;
			}
			.footer .footer-item div{
				padding: 28px 28px 16px 18px;
				background-color: #fff;
			}
			.footer .footer-item div h2{
				font-size: 18px;
				color: #333;
				margin-bottom: 22px;
			}
			.footer .footer-item div p{
				font-size: 16px;
				color: #999;
			}
			.footer .con .inner .margin-right{
				margin-right: 30px;
			}
			.footer .con .inner .margin-bottom{
				margin-bottom: 46px;
			}
			/*视频页的响应*/
			@media only screen and (min-width:1200px ) {
				.yqkj-mb{
					display: none;
				}
				.wiezhi{
					display: none;
				}
				.footer .footer-item{
					width: 31%;
					float: left;
			    }
               .footer .footer-item div p{
               	line-height: 1.8rem;
               	height: 9rem;
               	overflow: hidden;
               }
               .banner-mb{
               	display: none;
               }

			}
		</style>
        <style type='text/css'>
	           .pages a,.pages span {
	                display:inline-block;
	                padding:5px 9px;
	                margin:0 1px;
	                border:1px solid #f0f0f0;
	            }
	           .pages a,.pages li {
	                display:inline-block;
	                list-style: none;
	                text-decoration:none; color:#29d0c9;
	            }
	            .pages a.first,.pages a.prev,.pages a.next,.pages a.end{
	                     margin:0;
	             }
	            .pages a:hover{
	                   border-color:#29d0c9;
	               }
	            .pages span.current{
	                 background:#29d0c9;
	                 color:#FFF;
	                 font-weight:700;
	                 border-color:#29d0c9;
	             }
	           .table input,select{
		            border-radius:6px !important;
	             }
	            .pages{
		            display: -webkit-box;
		            display: -ms-flexbox;
		            display: -webkit-flex;
		            display: flex;
		           -webkit-box-pack: center;
		            -ms-flex-pack: center;
		            -webkit-justify-content: center;
		            justify-content: center;
		            -webkit-box-align: center;
		            -ms-flex-align: center;
		            padding: 5% 0;
		           padding-top: 3%;
    
	            }
           </style>
	</head>
	<body>
		<!--头部导航栏开始-->
		<include file="Public/header" />
		<!--头部导航栏结束-->
		<!--首页第一个轮播图开始-->
		<div class="banner">
	    	<img src="__PUBLIC__/midi/img/tt_2.png" />
	    </div>
		<!--首页第一个轮播图结束-->
		<!--乐器考级-->
		<div class="type-sec">
	    	<div class="type-inner">
	    		<div class="type-item">
	    			<span>电吉他</span>
	    			<div class="down-list">
	    				<ul>
	    					<i class="icon-up"></i>
	    				   <li><a href="__ACTION__?type=1_1">一级</a></li>
	    				   <li><a href="__ACTION__?type=1_2">二级</a></li>
	    				   <li><a href="__ACTION__?type=1_3">三级</a></li>
	    				   <li><a href="__ACTION__?type=1_4">四级</a></li>
	    				   <li><a href="__ACTION__?type=1_5">五级</a></li>
	    				   <li><a href="__ACTION__?type=1_6">六级</a></li>
	    				   <li><a href="__ACTION__?type=1_7">七级</a></li>
	    				   <li><a href="__ACTION__?type=1_8">八级</a></li>
	    				   <li><a href="__ACTION__?type=1_9">九级</a></li>
	    			    </ul>
	    			</div>
	    		</div>
	    		<div class="type-item">
	    			<span>爵士鼓</span>
	    			<div class="down-list">
	    				<ul>
	    					<i class="icon-up"></i>
	    				   <li><a href="__ACTION__?type=2_1">一级</a></li>
	    				   <li><a href="__ACTION__?type=2_2">二级</a></li>
	    				   <li><a href="__ACTION__?type=2_3">三级</a></li>
	    				   <li><a href="__ACTION__?type=2_4">四级</a></li>
	    				   <li><a href="__ACTION__?type=2_5">五级</a></li>
	    				   <li><a href="__ACTION__?type=2_6">六级</a></li>
	    				   <li><a href="__ACTION__?type=2_7">七级</a></li>
	    				   <li><a href="__ACTION__?type=2_8">八级</a></li>
	    				   <li><a href="__ACTION__?type=2_9">九级</a></li>
	    			    </ul>
	    			</div>
	    		</div>
	    		<div class="type-item">
	    			<span>电贝斯</span>
	    			<div class="down-list">
	    				<ul>
	    					<i class="icon-up"></i>
	    				   <li><a href="__ACTION__?type=3_1">一级</a></li>
	    				   <li><a href="__ACTION__?type=3_2">二级</a></li>
	    				   <li><a href="__ACTION__?type=3_3">三级</a></li>
	    				   <li><a href="__ACTION__?type=3_4">四级</a></li>
	    				   <li><a href="__ACTION__?type=3_5">五级</a></li>
	    				   <li><a href="__ACTION__?type=3_6">六级</a></li>
	    				   <li><a href="__ACTION__?type=3_7">七级</a></li>
	    				   <li><a href="__ACTION__?type=3_8">八级</a></li>
	    				   <li><a href="__ACTION__?type=3_9">九级</a></li>
	    			    </ul>
	    			</div>
	    		</div>
	    	</div>
	    </div>
		
		<!--乐器考级结束-->
		<!--视频-->
         <div class="video-sec">
	    	<div class="video-inner">
	    		<div class="video-line">
	    			<div class="video-item">
	    				<div class="logo-img">
	    					<div>
	    						<img src="img/logo.png" />
	    					</div>
	    				</div>
	    				<div class="play">
	    					<a><img src="__PUBLIC__/midi/caidan-img/bofanganniu.png"/></a>
	    				</div>
	    				<h2>{$v.video_name}</h2>
	    				<div class="p-wrapper">
	    					<p>{$v.video_introduction}</p>
	    				</div>
	    			</div>
	    			<div class="video-item">
	    				<div class="logo-img">
	    					<div>
	    						<img src="img/logo.png" />
	    					</div>
	    				</div>
	    				<div class="play">
	    					<a><img src="__PUBLIC__/midi/caidan-img/bofanganniu.png"/></a>
	    				</div>
	    				<h2>{$v.video_name}</h2>
	    				<div class="p-wrapper">
	    					<p>{$v.video_introduction}</p>
	    				</div>
	    			</div>
	    			<div class="video-item">
	    				<div class="logo-img">
	    					<div>
	    						<img src="img/logo.png" />
	    					</div>
	    				</div>
	    				<div class="play">
	    					<a><img src="__PUBLIC__/midi/caidan-img/bofanganniu.png"/></a>
	    				</div>
	    				<h2>{$v.video_name}</h2>
	    				<div class="p-wrapper">
	    					<p>{$v.video_introduction}</p>
	    				</div>
	    			</div>
	    			<div style="clear: both;"></div>
	    		</div>
	    		<div class="video-line">
	    			<div class="video-item">
	    				<div class="logo-img">
	    					<div>
	    						<img src="img/logo.png" />
	    					</div>
	    				</div>
	    				<div class="play">
	    					<a><img src="__PUBLIC__/midi/caidan-img/bofanganniu.png"/></a>
	    				</div>
	    				<h2>{$v.video_name}</h2>
	    				<div class="p-wrapper">
	    					<p>{$v.video_introduction}</p>
	    				</div>
	    			</div>
	    			<div class="video-item">
	    				<div class="logo-img">
	    					<div>
	    						<img src="img/logo.png" />
	    					</div>
	    				</div>
	    				<div class="play">
	    					<a><img src="__PUBLIC__/midi/caidan-img/bofanganniu.png"/></a>
	    				</div>
	    				<h2>{$v.video_name}</h2>
	    				<div class="p-wrapper">
	    					<p>{$v.video_introduction}</p>
	    				</div>
	    			</div>
	    			<div class="video-item">
	    				<div class="logo-img">
	    					<div>
	    						<img src="img/logo.png" />
	    					</div>
	    				</div>
	    				<div class="play">
	    					<a><img src="__PUBLIC__/midi/caidan-img/bofanganniu.png"/></a>
	    				</div>
	    				<h2>{$v.video_name}</h2>
	    				<div class="p-wrapper">
	    					<p>{$v.video_introduction}</p>
	    				</div>
	    			</div>
	    			<div style="clear: both;"></div>
	    		</div>
	    		<div class="pages" >{$page}</div>
	    	</div>
	    </div>
        



		<!--视频结束-->

		<!--曲谱教程页的主要内容结束-->
	    <script>
	    	$(function(){
	    		$(function(){
                 $(".right-item").on("click",function(){
      	                var $div = $(this).find($(".right-item-bottom"));
                       if($div.is (":hidden")){
       	                    $(this).siblings().find($(".right-item-bottom")).hide();
       	                    $(this).siblings().removeClass("select");
       	                    $(this).siblings().find("img").attr('src','__PUBLIC__/midi/caidan-img/xialajiantou.png');
       	                    $(this).addClass("select");
       	                    $(this).find("img").attr('src','__PUBLIC__/midi/caidan-img/xialajiantou-2.png');
                            $(".yqkj .con").css({
    			    	            'padding-bottom':'96px',
	    	                   })
       	                    $div.show();
                     }else{
       	                 $(".yqkj .con").css({
	    			              'padding-bottom':'26px',
    	                 })
       	                $(this).find("img").attr('src','__PUBLIC__/midi/caidan-img/xialajiantou.png');
                    	$div.hide();
                     }
                   })
                 $(".right-item-bottom ul li").hover(function(){
      	                $(this).css({
      		                  'background-color':'#29d0c9',
      		                  'color':'#fff'
      	                     })
                  },function(){
      	                 $(this).css({
      		                  'background-color':'#fff',
      		                    'color':'#333'
      	                   })
                    })


	    	})
	    		// $(".footer .footer-item").eq(2).removeClass("margin-right");
	    		// $(".footer .footer-item").eq(5).removeClass("margin-right");
       //          $(".footer .footer-item").eq(0).addClass("margin-bottom");
       //          $(".footer .footer-item").eq(1).addClass("margin-bottom");
       //          $(".footer .footer-item").eq(2).addClass("margin-bottom");

                $(".footer .footer-item").addClass("margin-right");
                $(".footer .footer-item").addClass("margin-bottom");
                for(var i = 0;i<100;i++){
                	$(".footer .footer-item").eq(2+3*i).removeClass("margin-right");
                }

	    	})
	    </script>
	</body>
</html>
